<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet"  type="text/css" href="../css/menu5.css">
    <link rel="stylesheet"  type="text/css" href="../css/menu5-4.css">
    <link rel="stylesheet" href="../js/menu5.js">
</head>
<body>
    <div style="position: fixed;width: 100%;">
        <div class="top" style="height: 90px;background-color: white;min-width: 1000px;">
            <div class="header_left" style="float: left;" width="13.14%">
                <img src="https://via.placeholder.com/250x90" >
            </div>
            <ul style="float: right;" class="ulmenu" style="min-width: 1900px;">
                <li class="li0" onmouseover="move()" onmouseout="leave()"><a class="a0" href="">导航一</a></li>
                <li class="li0"onmouseover="move()" onmouseout="leave()"><a class="a0" href="">导航二</a></li>
                <li class="li0" id="menu" onmouseover="move()" onmouseout="leave()"><a class="a0" href="">导航三</a>
                    <div>
                        <ul id="move_menu">
                            <li><a href="">子导航一</a></li>
                            <li><a href="">子导航二</a></li>
                            <li><a href="">子导航三</a></li>
                            <li><a href="">子导航四</a></li>
                            <li><a href="">子导航五</a></li>
                        </ul>
                    </div>
                </li>
                <li class="li0" id="menu" onmouseover="move()" onmouseout="leave()"><a class="a0" href="">导航四</a>
                    <ul id="move_menu">
                        <li><a href="">子导航一</a></li>
                        <li><a href="">子导航二</a></li>
                        <li><a href="">子导航三</a></li>
                        <li><a href="">子导航四</a></li>
                    </ul>
                </li>
                <li class="li2" id="menu"><a class="a1" href="menu5.html">导航五</a>
                    <ul id="move_menu">
                        <li><a href="menu5-1.html">子导航一</a></li>
                        <li><a href="menu5-2.html">子导航二</a></li>
                        <li><a href="menu5-3.html">子导航三</a></li>
                        <li><a href="menu5-4.html">子导航四</a></li>
                    </ul>
                </li>
                <li class="li0" onmouseover="move()" onmouseout="leave()"><a class="a0" href="">导航六</a></li>
                <li class="li0" onmouseover="move()" onmouseout="leave()"><a class="a0" href="">导航七</a></li>
            </ul>
        </div>
    </div>
    <img class="title" src="https://via.placeholder.com/1920x400" top center no-repeat width="100%" style="margin-top: 82px;">
        
    <div class="left" style="position: fixed;">
        <ul>
            <li><a href="menu5-1.html"><h1>01&nbsp;&nbsp;<span>子导航一</span></h1></a></li>
            <li><a href="menu5-2.html"><h1>02&nbsp;&nbsp;<span>子导航二</span></h1></a></li>
            <li><a href="menu5-3.html"><h1>03&nbsp;&nbsp;<span>子导航三</span></h1></a></li>
            <li style="background-color:#99d022 ;"><a href="menu5-4.html"><h1 style="color: #fff;">04&nbsp;&nbsp;<span style="color: #fff;">子导航四</span></h1></a></li>
        </ul>
    </div>

    <div class="floor4-1">
        <div id="floor4-11tit">标题</div>
        <div id="floor4-12tit">
           标题
        </div>
        <img src="https://via.placeholder.com/1100x400" width="91.67%" id="floor4-13img">
    </div>

    <div class="floor4-2" id="floor2">
        <div style="background: url(https://via.placeholder.com/1903x650) top center no-repeat;width: 100%;height: 650px;">
            <div id="floor4-21">
                <img src="https://via.placeholder.com/61x152" width="5.87%" id="floor4-22img">
                <div id="floor4-23"><p id="floor4-24tit">标题</p><p id="floor4-25txt">内容</p></div>
            </div>
        </div>
        <div id="floor4-26">
            <div id="floor4-27tit">标题</div>
            <div id="floor4-28tit">
               标题
            </div>
            <ul id="floor4-29">
                <li id="floor4-29card">
                    <img src="https://via.placeholder.com/110x110" alt="" width="34.56%">
                    <h1>标题</h1>
                    <p>内容<br>内容</p>
                </li>
                <li id="floor4-29card" style="background-color: #99d022;">
                    <img src="https://via.placeholder.com/110x110" alt="" width="34.56%">
                    <h1 style="color: white;">标题</h1>
                    <p style="color: white;">内容<br>内容</p>
                </li>
                <li id="floor4-29card">
                    <img src="https://via.placeholder.com/110x110" alt="" width="34.56%">
                    <h1>标题</h1>
                    <p>内容<br>内容</p>
                </li>
            </ul>
        </div>
    </div>

    <div class="floor4-3" id="floor2">
        <div id="floor4-31">
            <div id="floor4-32">
                <img src="https://via.placeholder.com/61x152" width="5.87%">
                <div><p id="floor4-33tit">标题</p><p id="floor4-34tit">内容</p></div>
            </div>
        </div>
        <div id="floor4-35">
            <div id="floor4-35tit">标题</div>
            <div id="floor4-36tit">
               标题
            </div>
            <ul id="floor4-37">
                <li id="floor4-37card">
                    <img src="https://via.placeholder.com/110x110" alt="" width="34.56%">
                    <h1>标题</h1>
                    <p>内容<br>内容</p>
                </li>
                <li id="floor4-37card">
                    <img src="https://via.placeholder.com/110x110" alt="" width="34.56%">
                    <h1>标题</h1>
                    <p>内容<br>内容</p>
                </li>
                <li id="floor4-37card">
                    <img src="https://via.placeholder.com/110x110" alt="" width="34.56%">
                    <h1>标题</h1>
                    <p>内容<br>内容</p>
                </li>
            </ul>
        </div>
    </div>

    <div class="floor4-4" id="floor2">
            <div id="floor4-32">
                <img src="https://via.placeholder.com/61x152" width="5.87%" >
                <div><p id="floor4-33tit">标题</p><p id="floor4-34tit">内容</p></div>
            </div>
        <div id="floor4-41">
            <ul id="floor4-42">
                <li>
                    <img src="https://via.placeholder.com/100x100" alt="" width="46.5%">
                    <h1>标题</h1>
                    <p>内容<br>内容</p>
                </li>
                <li>
                    <img src="https://via.placeholder.com/100x100" alt="" width="46.5%">
                    <h1>标题</h1>
                    <p>内容<br>内容</p>
                </li>
                <li>
                    <img src="https://via.placeholder.com/100x100" alt="" width="46.5%">
                    <h1>标题</h1>
                    <p>内容<br>内容</p>
                </li>
                <li>
                    <img src="https://via.placeholder.com/100x100" alt="" width="46.5%">
                    <h1>标题</h1>
                    <p>内容<br>内容</p>
                </li>
            </ul>
        </div>
    </div>

    <div class="btm">        
        <div class="left-icon" style="padding-left: 22%;">
            <img src="https://via.placeholder.com/24x24" alt=""><br>
            <img src="https://via.placeholder.com/24x24" alt="">
            <div style="clear: both;"></div>
        </div>
        <div class="btm-left" style="float: left;">
            <div>
                    <p>标题</p>
                    <div>内容</div>
            </div>
            <div>
                <p>标题</p>
                <div >内容</div>
            </div>              
        </div>
        <div class="left-icon">
            <img src="https://via.placeholder.com/24x24" alt="" ><br>
            <img src="https://via.placeholder.com/24x24" alt="">
            <div style="clear: both;"></div>
        </div>
        <div class="btm-left">
            <div>
                    <p>标题</p>
                    <div>内容</div>
            </div>
            <div>
                <p >标题</p>
                <div >内容</div>
            </div>              
        </div>
        <div class="btm-right">
            <div style="float: right;">
                <img src="https://via.placeholder.com/102x102" alt="">
                <p>二维码</p>
            </div>
            <div style="float: right;">
                <img src="https://via.placeholder.com/102x102" alt="">
                <p>二维码</p>
            </div>
            <div style="float: right;">
                <img src="https://via.placeholder.com/102x102" alt="">
                <p>二维码</p>
            </div>
        </div>
    
    </div>
    <div class="footer">
        内容
    </div>

    <div>
        <div class="menu5-min" id="min">
            <p>表单</p>
            <a href="javascript:fun1();"><img
                    src="http://sgoutong.baidu.com/embed/1610525758/asset/embed/css/pc/message/img/nodeMax.png" alt=""></a>
        </div>
        <div class="menu5-max" id="max">
            <div style="background: url(#);">
                <p id="formtit" >表单
                </p>
                <a href="javascript:fun2();"><img
                        src="http://sgoutong.baidu.com/embed/1610525758/asset/embed/css/pc/message/img/nodeMin.png"
                        alt="" style="float: right;margin: 2.5px 0;"></a>
            </div>
            <div class="menu5-max-til">
                <p id="co">公司</p>
                <p id="phone">电话</p>
            </div>
            <form report-submit="false" bindsubmit="" bindreset="" >
                <textarea  readonly>输入内容</textarea>
                <div>
                    <label for="username">
                        <img src="http://sgoutong.baidu.com/embed/1610525758/asset/embed/css/pc/message/img/user.png"
                            alt="" style="margin:10.5px 9px;">
                        <input type="text" id="username" placeholder="姓名">
                    </label>
                </div>
                <div>
                    <label for="password">
                        <img src="http://sgoutong.baidu.com/embed/1610525758/asset/embed/css/pc/message/img/nodephone.png"
                            alt="" style="margin:8.5px 11px;">
                        <input type="text" id="password" placeholder="密码（必填）">
                    </label>
                </div>
                <div>
                    <label for="place">
                        <img src="http://sgoutong.baidu.com/embed/1610525758/asset/embed/css/pc/message/img/nodelocation.png"
                            alt="" style="margin:9px 13.5px;">
                        <input type="text" id="place" placeholder="地址">
                    </label>
                </div>
                <input type="submit" id="submit" />
            </form>
        </div>
    </div>

    <a href="javascript:fun1();" id="rightbutton"></a>

        <script>
            function getScrollbarWidth() {
                var odiv = document.createElement('div'),
                styles = {
                    width: '100px',
                    height: '100px',
                    overflowY: 'scroll'
                }, i, scrollbarWidth;
                for (i in styles) odiv.style[i] = styles[i];
                document.body.appendChild(odiv);
                scrollbarWidth = odiv.offsetWidth - odiv.clientWidth;
                odiv.remove();
                return scrollbarWidth;
            }
            window.onload = () => {
                var wid= screen.width-getScrollbarWidth()+'px';
	            document.getElementsByTagName("body")[0].style.width  = wid;
            }
            function fun1(){
                document.getElementById('min').style.display = "none";
                document.getElementById('max').style.display = "block";
            }
            function fun2(){
                document.getElementById('min').style.display = "block";
                document.getElementById('max').style.display = "none";
            }
            function move(){
                var div10=document.getElementsByClassName('li2')
                var div30=document.getElementsByClassName('a1')
                div10[0].style.backgroundColor= "#fff";
                div30[0].style.color="#000"
            }
            function leave(){
                var div20=document.getElementsByClassName('li2')
                var div40=document.getElementsByClassName('a1')
                div20[0].style.backgroundColor= "#99d022";
                div40[0].style.color="#fff";
            }
        </script>
</body>
</html>